<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>表单</title>
		<style>
			* {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 550px;
      float: left;
      /* height: 500px; */
      background: #006699;
      margin: 30%;
      margin-top: 100px;
    }

    #box-1 {
      float: left;
      margin: 10px;
      width: 530px;
      /* height: 480px; */
      background: #fff;
    }

    header {
      text-align: center;
    }

    header h3 {
      line-height: 40px;
    }

    section {
      margin-top: 10px;
    }

    .form1 input {
      margin-left: 160px;
      margin-top: 10px;
      width: 200px;
      height: 24px;
      border-radius: 4px;
    }

    .form1 input[type=submit] {
      width: 60px;
      height: 26px;
      margin-left: 235px;

    }

    .form1 input::-webkit-input-placeholder {
      text-align: center;
      font-size: 12px;
    }

    table {
      width: 528px;
      margin-top: 26px;
      text-align: center;
      margin-bottom: 10px;
      font-family: serif;
      font-size: 13px;
      font-weight: bolder;
      letter-spacing: 6px;
    }

    .edit {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: none;
    }

    .form2 {
      margin-top: 200px;

    }

    .form2 input {
      width: 100px;
      height: 24px;
      display: block;


    }

  </style>
	</head>

	<body>
		<!--  -->
		<div id="box">
			<div id="box-1">
				<header>
					<h3>表单提交</h3>
				</header>
				<section>
					<form class="form1">
						<input type="text" class="name" placeholder="请输入您的名字" required><br>
						<input type="text" class="tel" placeholder="请输入您的电话号码" required><br>
						<input type="text" class="email" placeholder="请输入您的邮箱地址" required><br>
						<input type="submit" class="save">
					</form>
					<table border="1">
						<thead align="center">
							<tr>
								<td>姓名</td>
								<td>电话</td>
								<td>邮箱</td>
								<td>功能</td>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
					<div class=" edit">
						<form class="form2">
							<input type="text" class="editName">
							<input type="text" class="editTel">
							<input type="text" class="editEmail">
							<input type="submit" value="修改" class="editDiv">
						</form>
					</div>
				</section>
			</div>
		</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		// 第一步：保存 保存数据 保存到localstorage
		// 第二步：渲染数据 渲染到咱们的table中
		// 第三步：删除 tr localstorage数据删除
		// 第四步：修改 div 渲染当前表单中的数据
		// 第五步：保存咱们修改的
		// 第六步：正则表达式判断
		$('.save').on('click', function(e) {
			e.preventDefault();
			var tel = $('.tel').val();
			var email = $('.email').val();
			//判断一个手机号：/^1(3|4|5|7|8)\d{9}$/.test(tel)
			//判断一个邮箱：/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/.test(email)
			if (/^1(3|4|5|7|8)\d{9}$/.test(tel)) {
				$('.tel').val(tel);
			} else {
				alert('您的电话号码有误！请重新输入！！');
				return;
			}

			if (/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/.test(email)) {
				$('.email').val(email);
			} else {
				alert('您的邮箱有误！请重新输入！！');
				return;
			}

			var obj = {
				name: $('.name').val(),
				tel: $('.tel').val(),
				email: $('.email').val()
			}
			//想让数据多条存储 将数据类型变为数组

			var all = localStorage.getItem('list');
			if (all) {
				all = JSON.parse(all);
				all.push(obj);
				localStorage.setItem('list', JSON.stringify(all));
			} else {
				localStorage.setItem('list', JSON.stringify([obj]));
			}
			var str =
				`<tr>
  <td>${obj.name}</td>
  <td>${obj.tel}</td>
  <td>${obj.email}</td>
  <td>
    <button class="delBtn">删除</button>
    <button class="editBtn">修改</button>
  </td>
</tr>`;
			$('table tbody').append(str);

			//getAll();
		})
		//第二步：渲染数据 渲染到咱们的table中
		getAll();

		function getAll() {
			var all = localStorage.getItem('list');
			console.log(all);
			all = JSON.parse(all);
			console.log(all);
			if (all) {
				for (var i = 0; i < all.length; i++) {
					var str =
						`<tr>
  <td>${all[i].name}</td>
  <td>${all[i].tel}</td>
  <td>${all[i].email}</td>
  <td>
    <button class="delBtn">删除</button>
    <button class="editBtn">修改</button>
  </td>
  </tr>`;
					$('table tbody').append(str);
				}
			} else {
				return;
			}
		}
		//第三步：删除 tr localstorage数据删除 事件委托
		$('table').on('click', '.delBtn', function() {
			var tr = $(this).parent().parent();
			tr.remove();
			var all = localStorage.getItem('list');
			all = JSON.parse(all);
			all.splice(tr.index(), 1);
			localStorage.setItem('list', JSON.stringify(all));
			//修改
		}).on('click', '.editBtn', function() {
			$('.edit').css({
				display: "block",
			})
			var tr = $(this).parent().parent();
			var all = localStorage.getItem('list');
			all = JSON.parse(all);
			var obj = all[tr.index()];
			obj.index = tr.index();
			sessionStorage.setItem('listEdit', JSON.stringify(obj));
			$('.editName').val(obj.name);
			$('.editTel').val(obj.tel);
			$('.editEmail').val(obj.email);
		})
		//第五步：保存咱们修改的
		$('.editDiv').on('click', function(e) {
			e.preventDefault();
			var all = localStorage.getItem('list');
			var obj2 = sessionStorage.getItem('listEdit');
			all = JSON.parse(all);
			obj2 = JSON.parse(obj2);

			var obj1 = {
				name: $('.editName').val(),
				tel: $('.editTel').val(),
				email: $('.editEmail').val()
			}
			console.log(obj2.index)
			all.splice(obj2.index, 1, obj1);
			localStorage.setItem('list', JSON.stringify(all));
			$('tbody tr').remove();
			getAll();
			$('.edit').css({
				display: "none",
			})
			// $('.edit').hide();





		})
	</script>

</html>
